<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <!-- <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/assign_custom' }">
          <div class="div2">分配客户</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <div class="query">
      <div class="header">
        <span>应用管理</span>
        <div class="right">
          <div class="right1">
            <el-input
              v-model="name"
              prefix-icon="el-icon-search"
              size="mini"
              type="text"
              placeholder="请输入应用名称"
            />
            <p @click="searchEvent">搜索</p>
          </div>
          <el-button size="mini" @click="reset" plain>重置</el-button>
          <el-button
            style="background: #2d7edf; color: #fff"
            size="mini"
            @click="
              hidden = true;
              form = {};
            "
            >新增应用</el-button
          >
        </div>
      </div>
    </div>

    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <vxe-table align="center" :data="tableData.list" style="width: 100%">
        <vxe-table-column type="seq" title="序号" width="50"></vxe-table-column>
        <vxe-table-column title="应用名称" min-width="100">
          <template slot-scope="scope">
            <template v-if="!scope.row.edit">
              <el-input
                v-model="scope.row.applicationName"
                class="edit-input"
                size="small"
                maxlength="32"
              />
            </template>
            <span v-else>{{ scope.row.applicationName }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column title="应用介绍" min-width="120">
          <template slot-scope="scope">
            <template v-if="!scope.row.edit">
              <el-input
                v-model="scope.row.applicationIntroduction"
                class="edit-input"
                size="small"
              />
            </template>
            <span v-else>{{ scope.row.applicationIntroduction }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="appId"
          title="APP ID"
          show-overflow
          min-width="180"
        ></vxe-table-column>
        <vxe-table-column title="APP Key" min-width="100">
          <template slot-scope="scope">
            <p v-if="is_null(scope.row.appKey)">--</p>
            <p v-else>{{ scope.row.appKey }}</p>
          </template>
        </vxe-table-column>

        <vxe-table-column title="创建时间" min-width="110">
          <template slot-scope="scope">
            {{ $moment(scope.row.createdTime) }}
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <p
              class="operation"
              v-if="parArray.indexOf('userPrever') != -1"
            >
              <span
                v-if="scope.row.edit"
                @click="scope.row.edit = !scope.row.edit"
                >编辑</span
              >
              <span v-else @click="preverEdit(scope.row)">保存</span>
            </p>

            <p
              class="operation"
              v-if="parArray.indexOf('userPrever') != -1"
            >
              <span
                v-if="!scope.row.edit"
                @click="
                  scope.row.edit = true;
                  scope.row.applicationName = scope.row.applicationName1;
                  scope.row.applicationIntroduction =
                    scope.row.applicationIntroduction1;
                "
                >取消</span
              >
            </p>

            <p
              class="operation"
              @click="delectEvent(scope.row)"
              v-if="parArray.indexOf('userDelect') != -1"
            >
              <span>删除</span>
            </p>
          </template>
        </vxe-table-column>
      </vxe-table>

      <!-- 分页start -->
      <div class="page" v-if="tableData.totalNum > 0">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalNum"
            prev-text="上一页"
            next-text="下一页"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    </div>
    <!-- 分配用户列表 -->
    <!-- 弹框   -->
    <el-dialog :visible.sync="hidden" :append-to-body="true" title="新增">
      <el-form ref="form" :rules="formRules" :model="form" label-width="80px">
        <el-form-item label="应用名称" prop="yyname">
          <el-input
            placeholder="请输写应用名称"
            v-model="form.yyname"
            size="mini"
            maxlength="32"
          ></el-input>
        </el-form-item>
        <el-form-item label="应用介绍">
          <el-input
            type="textarea"
            placeholder="请输写应用介绍"
            v-model="form.intro"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="submitForm('form')"
            >确定</el-button
          >
          <el-button
            size="mini"
            @click="
              resetForm('form');
              hidden = false;
            "
            >取 消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 弹框   -->
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
export default {
  components: {
    levelAddr,
  },
  data() {
    return {
      tableData: [],
      hidden: false,
      name: "",
      currentPage1: 1,
      pageSize: 10,
      form: {
        yyname: "",
        intro: "",
      },
      formRules: {
        yyname: [
          { required: true, message: "请选择应用名称", trigger: "blur" },
        ],
      },
      limits: "",
      parArray: [],
    };
  },
  created() {
    this.listAxios(1);
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "userlistCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  beforeRouteLeave(to, form, next) {
    document.onkeydown = null;
    next();
  },
  methods: {
    listAxios() {
      this.axios
        .post("/member/v1/member/application/list", {
          appId: "",
          appKey: "",
          request: {
            applicationName: this.name,
            pageNo: this.currentPage1,
            pageSize: this.pageSize,
          },
          version: "",
        })
        .then((res) => {
          if (res.code == 0) {
            for (let i in res.data.list) {
              res.data.list[i].edit = true;
              res.data.list[i].applicationName1 =
                res.data.list[i].applicationName;
              res.data.list[i].applicationIntroduction1 =
                res.data.list[i].applicationIntroduction;
            }
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    submitForm(addForm) {
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          this.axios
            .post("/member/v1/member/application/add", {
              appId: "",
              appKey: "",
              request: {
                applicationIntroduction: this.form.intro,
                applicationName: this.form.yyname,
              },
              version: "",
            })
            .then((res) => {
              // console.log(res);
              if (res.code == 0) {
                this.$message.success("添加成功");
                this.hidden = false;
                this.form = {};
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        } else {
          console.log("提交失败");
          return false;
        }
      });
    },
    preverEdit: _.debounce(function (row) {
      this.axios
        .post(
          "/member/v1/member/application/update",
          {
            appId: "",
            appKey: "",
            request: {
              appId: row.appId,
              appKey: row.appKey,
              applicationIntroduction: row.applicationIntroduction,
              applicationName: row.applicationName,
              id: row.id,
            },
            version: "",
          },
          {
            isloading: false,
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("修改成功");
            this.listAxios();
          } else {
            this.$message.error(res.message);
          }
        });
    }, 300),

    resetForm(addForm) {
      this.$refs[addForm].resetFields();
    },

    reset: _.debounce(function () {
      this.name = "";
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios();
    }, 300),

    // 分页
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.listAxios();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listAxios();
    },
    // 删除
    delectEvent: _.debounce(function (row) {
      this.$confirm("确定要删除该应用吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/member/v1/member/application/delete?id=" + row.id)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("删除成功");
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),
    //** 模糊查询数据 **//
    searchEvent() {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios("1");
    },
    is_null(content) {
      if (
        content + "" != "" &&
        content + "" != "undefined" &&
        content + "" != "null" &&
        content + "" != "请选择"
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;
  margin-bottom: 40px;
}

/deep/.vxe-cell--title {
  color: #333;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    p {
      display: inline-block;
    }
  }
  span {
    font-size: 15px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  display: inline-block;
  padding: 0 5px;
  color: #2d7edf;
  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}
.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.right1 {
  display: flex;
  justify-content: flex-start;
  border: 2px solid #2d7edf;
  margin-right: 20px;
  border-radius: 2px;
  p {
    width: 100px;
    text-align: center;
    border: 1px solid #2d7edf;
    line-height: 25px;
    background: #2d7edf;
    color: #fff;
  }
  /deep/.el-input__inner {
    // width: 250px;
    height: 25px;
    line-height: 25px;
    border: none;
  }
}
</style>
